<template>
  <div class="sms-record-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <div class="title-section">
        <h2 class="page-title">短信记录</h2>
      </div>
    </div>

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" class="filter-toolbar">
      <div class="left-section">
      <el-form-item label="手机号" prop="smsMobile">
          <el-input v-model="queryParams.smsMobile" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" class="custom-input" />
      </el-form-item>
      <!--
      <el-form-item label="错误码" prop="smsErrcode">
        <el-input v-model="queryParams.smsErrcode" placeholder="请输入错误码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <!-- <el-form-item label="对应帐号" prop="smsAccount">
        <el-input v-model="queryParams.smsAccount" placeholder="请输入对应帐号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item label="短信类型" prop="smsLx">
        <el-select v-model="queryParams.smsLx" placeholder="请选择短信类型" style="width: 100%"
                     @keyup.enter.native="handleQuery" class="custom-select">
          <el-option label="普通短信" value="1" />
          <el-option label="智能短信" value="2" />
        </el-select>

      </el-form-item>
      <!-- <el-form-item label="短信通道" prop="smsChannel">
          <el-select v-model="queryParams.smsChannel" style="width: 100%;" filterable placeholder="通道" clearable class="custom-select">
          <el-option v-for="item in channelsList" :key="item.id" :label="item.name"
                     :value="item.id.toString()"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="客户名称" prop="smsName">
          <el-input v-model="queryParams.smsName" placeholder="请选择客户名称" @focus="showkh()" @clear="qk2" clearable class="custom-input" />
      </el-form-item>
      </div>

      <div class="right-section">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="custom-button primary-button">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="custom-button reset-button">重置</el-button>
      </div>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-chat-square" size="mini" @click="sendSms" class="custom-button primary-button action-button">发送短信</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" class="custom-button warning-button action-button"
                   v-hasPermi="['Sms:SmsRecord:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="SmsRecordList" @selection-change="handleSelectionChange" class="custom-table" border>
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="流水号" align="center" prop="smsCustid" v-if="false" />
      <el-table-column label="手机号" align="center" prop="smsMobile" width="120" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="150" />
      <el-table-column label="发送时间" align="center" prop="smsStime" width="150">
        <!-- <template slot-scope="scope">
          <span>{{ parseTime(scope.row.smsStime, '{y}-{m}-{d}') }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="发送内容" align="left" prop="smsContent" :show-overflow-tooltip="true" width="350" />
      <el-table-column label="返回时间" align="center" prop="smsRtime" v-if="false">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.smsRtime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发送状态" align="center" prop="smsStatus" width="120">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.smsStatus == '0'" class="custom-tag">成功</el-tag>
          <el-tag type="danger" v-else-if="scope.row.smsStatus != null && scope.row.smsStatus != '0'" class="custom-tag">失败</el-tag>
          <el-tag type="warning" v-else class="custom-tag">其它</el-tag>

        </template>
      </el-table-column>
      <el-table-column label="错误码" align="center" prop="smsErrcode" width="120" />
      <el-table-column label="错误描述" align="center" prop="smsErrdesc" v-if="false" />

      <!-- <el-table-column label="通知状态" align="center" prop="rptType" /> -->
      <!-- <el-table-column label="发送帐号" align="center" prop="smsAccount" /> -->
      <!-- <el-table-column label="对应签名" align="center" prop="smsSignature" /> -->
      <!-- <el-table-column label="短信通道" align="center" prop="channelname" /> -->
      <el-table-column label="客户名称" align="center" prop="khname" />
      <el-table-column label="短信类型" align="center" prop="smsLx" width="120">
        <template slot-scope="scope">
          {{ scope.row.smsLx == 1 ? '普通短信' : scope.row.smsLx == 2 ? '智能短信' : scope.row.smsLx }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['Sms:SmsRecord:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['Sms:SmsRecord:remove']">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <div v-if="!SmsRecordList || SmsRecordList.length === 0" class="empty-state">
      <img src="/placeholder.svg?height=100&width=100" alt="暂无数据" class="empty-image">
      <p class="empty-text">暂无数据</p>
    </div>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList" class="custom-pagination" />

    <!-- 添加或修改短信发送对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body class="custom-dialog">
      <el-form ref="sendform" :model="sendform" :rules="sendrules" label-width="80px" class="dialog-form">
        <el-form-item label="对应帐号" prop="smsKey">
          <el-input v-model="sendform.smsKey" class="custom-input" />
        </el-form-item>
        <el-form-item label="对应签名" prop="smsSignature">
          <el-input v-model="sendform.smsSignature" placeholder="请输入对应签名" class="custom-input" />
        </el-form-item>
        <el-form-item label="发送手机" prop="smsMobile">
          <el-input v-model="sendform.smsMobile" placeholder="请输入手机号" class="custom-input" />
          <div class="upload-container">
            <el-upload
              class="upload-demo"
              action="#"
              :http-request="handleFileUpload"
              :on-change="handleFileChange"
              :on-remove="handleFileRemove"
              :file-list="fileList"
              :auto-upload="false"
              :limit="1"
              :show-file-list="true"
            >
              <el-button size="small" type="primary">批量导入</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <div class="form-actions">
          <span class="hint-text">导入格式：姓名,手机号码 (可下载模版)</span>
          <el-button type="text" size="small" icon="el-icon-download" @click="downloadTemplate" class="download-btn">下载号码模版</el-button>
        </div>
        <el-form-item label="发送内容" prop="smsContent">
          <el-input v-model="sendform.smsContent" type="textarea" :rows="4" placeholder="请输入内容" class="custom-textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" class="custom-button primary-button submit-button">确 定</el-button>
        <el-button @click="cancel" class="custom-button cancel-button">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSmsRecord, getSmsRecord, delSmsRecord, addSmsRecord, updateSmsRecord, sendSms } from "@/api/Sms/SmsRecord";
import { listChannels } from "@/api/Sms/channels";

export default {
  name: "SmsRecord",
  dicts: [],
  data() {
    return {
      cmids: null,//选择的商机id
      userIds: [],//用户组，选人组件用
      // 短信通道表格数据
      channelsList: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 短信发送表格数据
      SmsRecordList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        smsCustid: null,
        smsMobile: null,
        smsCountrycode: null,
        smsContent: null,
        smsHtml: null,
        smsStime: null,
        smsRtime: null,
        smsStatus: null,
        smsErrcode: null,
        smsErrdesc: null,
        smsExdata: null,
        smsType: null,
        rptType: null,
        smsAccount: null,
        smsSignature: null,
        smsChannel: null,
        smsLx: null,
        smsTmplid: null,
        smsExno: null,
        other1: null,
        other2: null,
        other3: null,
        other4: null,
        other5: null,
        smsName: null,
        userId: null,

      },
      // 表单参数
      form: {},
      sendform: {
        smsKey: "556bbe93de20f4bc9b925e0f8ffd5db3",
        smsLx: "1",
        smsContent: "测试001",
        smsMobile: "18395859595",
        smsSignature: "SIG_202504_5153",
      },
      // 表单校验
      rules: {
      },
      // 表单校验
      sendrules: {
        smsKey: [
          { required: true, message: "帐号不能为空", trigger: "blur" }
        ],
        smsContent: [
          { required: true, message: "发送内容不能为空", trigger: "blur" }
        ],
        smsMobile: [
          { required: true, message: "发送手机不能为空", trigger: "blur" }
        ],
        smsSignature: [
          { required: true, message: "签名不能为空", trigger: "blur" }
        ],
      },
      // 文件上传
      fileList: [],
      uploadedContacts: [],
    };
  },
  created() {
    this.getList();
    listChannels().then(response => {
      this.channelsList = response.rows;
      this.total = response.total;

    });
  },
  computed: {
    // 表格样式
    tableHeaderStyle() {
      return {
        background: '#f5f7fa',
        color: '#606266',
        fontWeight: 500,
        height: '50px'
      }
    }
  },
  methods: {
    qk2() {
      this.queryParams.userId = null;
    },
    /** 选择客户相关事件 */
    showkh() {
      this.$nextTick(() => {
        this.$refs.selectry.show1();
      });
    },

    //绑定客户事件
    savery(val1, val2) {

      this.queryParams.smsName = val2;
      this.queryParams.userId = val1;

    },

    /** 查询短信发送列表 */
    getList() {
      this.loading = true;
      this.queryParams.userId=this.$store.state.user.userId;
      listSmsRecord(this.queryParams).then(response => {
        this.SmsRecordList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        smsCustid: null,
        smsMobile: null,
        smsCountrycode: null,
        smsContent: null,
        smsHtml: null,
        smsStime: null,
        smsRtime: null,
        smsStatus: null,
        smsErrcode: null,
        smsErrdesc: null,
        smsExdata: null,
        smsType: null,
        rptType: null,
        smsAccount: null,
        smsSignature: null,
        smsChannel: null,
        smsLx: null,
        smsTmplid: null,
        smsExno: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        other1: null,
        other2: null,
        other3: null,
        other4: null,
        other5: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.userId = null;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    sendSms() {
      this.reset();
      this.open = true;
      this.title = "短信发送";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSmsRecord(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改短信发送";
      });
    },
    /** 发送按钮 */
    submitForm() {

      this.$refs["sendform"].validate(valid => {
        if (valid) {
          sendSms(this.sendform).then(response => {
            this.$modal.msgSuccess("发送成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除短信发送编号为"' + ids + '"的数据项？').then(function () {
        return delSmsRecord(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('Sms/SmsRecord/export', {
        ...this.queryParams
      }, `SmsRecord_${new Date().getTime()}.xlsx`)
    },
    /** 下载号码模版 */
    downloadTemplate() {
      // 创建CSV内容
      const csvContent = "姓名,手机号码\n张三,18888888888\n李四,13999999999\n";

      // 创建Blob对象
      const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8" });

      // 创建下载链接
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = "手机号码导入模版.csv";

      // 模拟点击下载
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

      this.$message({
        message: "模版下载成功",
        type: "success"
      });
    },
    // 处理文件变更
    handleFileChange(file) {
      this.fileList = [file];
    },

    // 处理文件移除
    handleFileRemove() {
      this.fileList = [];
      this.uploadedContacts = [];
      this.sendform.smsMobile = "";
    },

    // 处理文件上传
    handleFileUpload(options) {
      const file = options.file;
      if (file) {
        const reader = new FileReader();

        reader.onload = (e) => {
          try {
            const csvData = e.target.result;
            const lines = csvData.split('\n');

            // 跳过标题行
            if (lines.length > 1) {
              const contacts = [];
              const phoneNumbers = [];

              for (let i = 1; i < lines.length; i++) {
                const line = lines[i].trim();
                if (line) {
                  const parts = line.split(',');
                  if (parts.length >= 2) {
                    const name = parts[0].trim();
                    const phone = parts[1].trim();

                    // 验证手机号格式
                    const phoneRegex = /^1[3-9]\d{9}$/;
                    if (phoneRegex.test(phone)) {
                      contacts.push({ name, phone });
                      phoneNumbers.push(phone);
                    }
                  }
                }
              }

              this.uploadedContacts = contacts;
              this.sendform.smsMobile = phoneNumbers.join(',');

              this.$message({
                message: `成功导入 ${this.uploadedContacts.length} 个联系人`,
                type: 'success'
              });
            } else {
              this.$message.warning('文件内容为空或格式不正确');
            }
          } catch (error) {
            console.error(error);
            this.$message.error('解析文件时出错，请检查文件格式');
          }
        };

        reader.onerror = () => {
          this.$message.error('读取文件失败');
        };

        reader.readAsText(file);
      } else {
        this.$message.warning('无法读取文件');
      }
    },
  }
};
</script>

<style scoped>
.sms-record-container {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

/* 页面标题样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-section {
  display: flex;
  align-items: center;
}

.page-title {
  font-size: 22px;
  color: #303133;
  margin: 0;
  font-weight: 500;
}

/* 筛选工具栏样式 */
.filter-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  background-color: #f9fafc;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.left-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 10px;
}

.right-section {
  display: flex;
  gap: 15px;
  margin-left: auto;
}

/* 表单项样式增强 */
.el-form-item {
  margin-bottom: 0;
  margin-right: 0;
}

.el-form-item__label {
  color: #606266;
  font-weight: 500;
  font-size: 14px;
}

/* 自定义输入框样式 */
.custom-input >>> .el-input__inner {
  border-radius: 4px;
  height: 40px;
  transition: all 0.3s;
  font-size: 14px;
  color: #303133;
  border: 1px solid #dcdfe6;
}

.custom-input >>> .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 159, 255, 0.2);
}

/* 自定义选择框样式 */
.custom-select >>> .el-input__inner {
  border-radius: 4px;
  height: 40px;
  transition: all 0.3s;
  font-size: 14px;
  color: #303133;
  border: 1px solid #dcdfe6;
}

.custom-select >>> .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 159, 255, 0.2);
}

/* 自定义按钮样式 */
.custom-button {
  border-radius: 4px;
  transition: all 0.3s;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 15px;
  margin: 0 5px;
  height: auto;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.primary-button {
  background-color: #409eff;
  border-color: #409eff;
  color: white;
}

.primary-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 重置按钮样式 */
.reset-button {
  background-color: #ffffff;
  border-color: #dcdfe6;
  color: #606266;
}

.reset-button:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

/* 普通按钮样式增强 */
.el-button {
  font-weight: 500;
  padding: 8px 15px;
}

.el-button--mini {
  padding: 7px 12px;
  font-size: 13px;
}

/* 警告按钮样式 */
.el-button--warning {
  background-color: #e6a23c;
  border-color: #e6a23c;
  color: white;
}

.el-button--warning:hover {
  background-color: #ebb563;
  border-color: #ebb563;
  color: white;
}

/* 表格中按钮样式优化 */
.el-table .el-button {
  padding: 6px 10px;
  font-weight: 500;
}

/* 表格内操作按钮 */
.el-table .el-button--text {
  color: #409eff;
  font-weight: 500;
  font-size: 13px;
}

.el-table .el-button--text:hover {
  color: #66b1ff;
  background: rgba(64, 158, 255, 0.1);
  padding: 6px 10px;
  border-radius: 4px;
}

/* 自定义表格样式 */
.custom-table {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-top: 16px;
}

.custom-table >>> .el-table__header-wrapper th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
  height: 50px;
  font-size: 14px;
}

.custom-table >>> .el-table__row {
  height: 48px;
}

.custom-table >>> .el-table__row:hover {
  background-color: #f5f7fa;
}

.custom-table >>> .cell {
  font-size: 13px;
  padding: 8px 12px;
  line-height: 1.5;
}

/* 自定义标签样式 */
.custom-tag {
  border-radius: 4px;
  padding: 2px 8px;
  height: 24px;
  line-height: 20px;
  font-size: 12px;
  font-weight: 500;
}

/* 空数据状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-top: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.empty-image {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

.empty-text {
  color: #909399;
  font-size: 14px;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 10px 0;
}

.custom-pagination >>> .el-pagination__total,
.custom-pagination >>> .el-pagination__jump {
  margin-left: 16px;
}

.custom-pagination >>> .el-pagination__sizes {
  margin-left: 16px;
}

.custom-pagination >>> .el-pagination button {
  min-width: 32px;
  height: 32px;
}

.custom-pagination >>> .el-pager li {
  min-width: 32px;
  height: 32px;
  line-height: 32px;
}

/* 文本区域样式 */
.custom-textarea >>> .el-textarea__inner {
  border-radius: 4px;
  transition: all 0.3s;
  font-size: 14px;
  padding: 10px;
  color: #303133;
  border: 1px solid #dcdfe6;
  line-height: 1.5;
}

.custom-textarea >>> .el-textarea__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 159, 255, 0.2);
}

/* 对话框样式 */
.custom-dialog >>> .el-dialog {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.custom-dialog >>> .el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #f9fafc;
}

.custom-dialog >>> .el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.custom-dialog >>> .el-dialog__body {
  padding: 25px 20px;
}

.custom-dialog >>> .el-dialog__footer {
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  background-color: #f9fafc;
}

/* 表单样式 */
.dialog-form .el-form-item__label {
  font-weight: 500;
  color: #303133;
}

.dialog-form .el-form-item {
  margin-bottom: 20px;
}

/* 提示文本样式 */
.hint-text {
  color: #409eff;
  font-size: 13px;
}

.mb8 {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.mb8 .el-col {
  margin-right: 10px;
}

/* 操作按钮样式 */
.action-button {
  min-width: 95px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin: 0;
}

/* 导出按钮样式 */
.warning-button {
  background-color: #fff;
  border-color: #e6a23c;
  color: #e6a23c;
}

.warning-button:hover {
  background-color: #fdf6ec;
  color: #e6a23c;
}

/* 对话框按钮样式 */
.submit-button {
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  width: 90px;
  letter-spacing: 2px;
}

.cancel-button {
  background-color: #ffffff;
  border-color: #dcdfe6;
  color: #606266;
  width: 90px;
  letter-spacing: 2px;
}

.dialog-footer {
  text-align: center;
  padding-top: 10px;
}

.el-dialog__header {
  font-weight: 600;
}

/* 表单操作区域样式 */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -10px 0 15px 80px;
  width: calc(100% - 80px);
}

.download-btn {
  padding: 2px 5px;
  font-size: 13px;
  color: #409eff;
}

.download-btn:hover {
  background-color: #ecf5ff;
  border-radius: 4px;
}

/* 上传容器样式 */
.upload-container {
  margin-top: 10px;
}

.upload-container .el-upload-list {
  margin-top: 8px;
}

.upload-container .el-button--primary {
  margin-top: 4px;
  height: 32px;
  line-height: 30px;
  padding: 0 15px;
  font-size: 12px;
}
</style>
